import React from 'react';
import {
  Button, Tag, message, Modal, Table,
} from 'antd';
import sortBy from 'lodash/fp/sortBy';
import timeFormat from 'utils/time';
import { listProcess, deprecateProcess } from 'services/process';
import ConfirmDeleteButton from 'components/ConfirmDeleteButton';
import DeprecatedProcessViewer from './DeprecatedProcessViewer';
import BpmnModifier from './BpmnModifier';

export default class ProcessList extends React.Component {
  constructor() {
    super();
    this.state = {
      dataSource: [],
      modalVisible: false,
      processId: null,
      processName: null,
      loading: true,
      visible: false,
    };
  }

  async updateData() {
    try {
      const data = await listProcess();
      this.setState({ dataSource: data, loading: false });
    } catch (error) {
      console.error(error.message);
    }
  }

  componentDidMount() {
    this.updateData();
  }

  render() {
    const {
      dataSource, modalVisible, processId, processName, loading, visible,
    } = this.state;
    const sorted = sortBy(['deprecated', 'name'])(dataSource);
    const { history } = this.props;
    const columns = [
      {
        title: '流程名称',
        key: 'name',
        render: (record) => (
          <span>
            {record.name}
            {record.deprecated ? <Tag style={{ marginLeft: 10 }} color="red">已废弃</Tag> : null}
          </span>
        ),
      },
      {
        title: '创建时间',
        dataIndex: 'created',
        key: 'created',
        render: timeFormat,
        defaultSortOrder: 'descend',
        sorter: (a, b) => a.created > b.created,
      },
      {
        title: '操作',
        key: 'operation',
        render: (record) => (record.deprecated ? (
          <Button
            size="small"
            onClick={() => {
              const { id, name } = record;
              this.setState({
                modalVisible: true,
                processId: id,
                processName: name,
              });
            }}
          >
            查看
          </Button>
        ) : (
          <span>
            <Button
              style={{ marginRight: '10px' }}
              size="small"
              onClick={() => {
                const { id, name, deprecated } = record;
                const search = `?id=${id}&name=${name}`;
                history.push({ pathname: 'run/detail', search, state: { deprecated } });
              }}
            >
              运行
            </Button>
            <Button
              type="primary"
              style={{ marginRight: '10px' }}
              size="small"
              onClick={() => {
                const { id, name } = record;
                this.setState({
                  visible: true,
                  processId: id,
                  processName: name,
                });
              }}
            >
              修改
            </Button>
            <ConfirmDeleteButton
              confirmTitle="确定废弃该流程?"
              onConfirm={async () => {
                try {
                  await deprecateProcess(record.name);
                  message.success('流程废弃成功!');
                  this.updateData();
                } catch (error) {
                  console.error(error);
                }
              }}
              buttonText="废弃"
            />
          </span>
        )),
      },
    ];
    return (
      <>
        <Table
          columns={columns}
          dataSource={sorted}
          size="middle"
          rowKey="name"
          loading={loading}
        />
        <Modal
          visible={modalVisible}
          footer={null}
          width={800}
          destroyOnClose
          onCancel={() => { this.setState({ modalVisible: false }); }}
        >
          <DeprecatedProcessViewer
            processId={processId}
            name={processName}
          />
        </Modal>
        <Modal
          width="1200px"
          visible={visible}
          onCancel={() => { this.setState({ visible: false }); }}
          destroyOnClose
          footer={null}
        >
          <BpmnModifier
            processId={processId}
            name={processName}
          />
        </Modal>
      </>
    );
  }
}
